<template>
    <div class="yybox four-cornor-wrapper" style="background:#fff;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- main -->
      <h2 class="common-title">
        <span class="main">美容常识</span>
      </h2>
      <!-- product-list -->
      <div v-if ="infoArr.length > 0">
        <ul class="product-list">
          <li class="product-list-item" v-for="(v, i) in infoArr" :key="i" @click="viewProduct(v)">
            <div class="product-img"><img :src="v.image" /></div>
            <div class="product-title">
              <div class="topTitle">
                {{v.title}}
              </div>
              <p class="content">
                {{v.intro}}

              </p>
              <p class="pTime">
                发布日期: {{v.time}}
              </p>
            </div>
          </li>
        </ul>
        <!-- <div class="clearfix mt20" >
          <div class=" fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pagenum"
              :page-sizes="[12, 24, 36, 48]"
              :page-size="params.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div> -->
      </div>
      <div class="no-data" v-else>暂无数据</div>
      <!-- end product list -->
    </div>
</template>
<script>
export default {
  data () {
    return {
      params: {
        areaId: 403890,
        // gcId: '',
        // gcId1: '',
        keyWord: '',
        orderId: 10,
        pagenum: 1,
        pagesize: 12,
        appCode: 'resident'
      },
      products: [],
      total: 0,
      infoArr: [
        {id:41,title: '掌握肌肤年轻白嫩的秘诀 自由基告诉你答案', time: '2018-12-17', image: require('../../assets/info/cosmetology1.jpg'), intro:"我们都知道铁在空气中会生锈、银器在空气中会变黑，这些都是氧化作用的结果。其实，人的新陈代谢也类似于氧化作用。而“自由基”就是身体在新陈代谢过程中产生的一种有害物质，它具有很强的氧化性，会损害细胞功能，从而加速人体衰老。", topContent: '<p><span>&nbsp; &nbsp; 药品容易受到光线、温度、湿度、微生物的影响与破坏。如药品存放不当，或存放过久，会使药品质量下降或变质无效，用这样的药品会造成不良后果。</span></p>', content: `自由基是埋在身体里的“雷”<br>正常情况下，体内自由基的产生和消除处于相对平衡状态。如果人体内自由基产生过多，得不到及时清除，便会导致疾病和衰老。<br>据统计，至少有一百多种病征与体内自由基过多有关。<br>1、动脉粥状硬化<br>动脉粥状硬化是自由基引起的“最迫切的危机”。人体内的胆固醇可以分为好的胆固醇和坏的胆固醇，其中坏的胆固醇很容易被自由基氧化，它们会附着在血管壁上，就像水管里的污垢。积累到一定程度后，就会对血管形成阻塞。<br>2、 产生皱纹、色斑<br>在自由基的作用下，胶原蛋白会遭到破坏，使皮肤得不到足够的营养供应，造成皮肤组织活力下降，失去弹性，导致皱纹产生、肤色暗沉等。同时，随着年龄的增大、自由基增多，自由基腐蚀体内组织细胞的程度也日益加深，脂褐素越积越多，色斑也就慢慢形成、显现。<br>阳光照射、空气中的有害物质等环境影响因素，或精神压力、饮食习惯、生活作息等，都会使人体内形成更多的自由基。<br>掌握肌肤年轻白嫩的秘诀 自由基告诉你答案<br>如何清除自由基抗衰老?<br>1、多食抗氧化的蔬果<br>根据我国学者近些年的研究结果发现，藕、姜、油菜、豇豆、芋头的抗氧化作用较强，菠菜、甜椒、西兰花、胡萝卜等的抗氧化作用紧随其后，水果中的蓝莓、猕猴桃、鲜枣、黄桃、山楂等的抗氧化效果也不错。<br>2、巧用中药来调养<br>生脉散是中医名方，主要由三味药组成：人参、麦冬、五味子。别看它仅由三味普通的药材组成，却有很好的益气养阴、清润生津功效，益气养阴从现代医学的角度来看，跟抗氧化的效果差不多。<br>而且，其中的五味子还含有特殊功效成分五味子乙素，已被科学证明有清除自由基、增强机体抗氧化能力的功效。此外，方中的人参还可以用花旗参来代替，花旗参偏益气养阴，与其他药材更加搭配。<br>衰老是一件悄无声息却又残酷的事情，但并非完全无法挽回。从今天开始，和小编一起清除自由基，让自己的颜值比岁月更年轻！`},
        {id:42,title: '长得美的人都这样洗脸，长得丑的你随意', time: '2018-12-10', image: require('../../assets/info/cosmetology2.jpg'), intro:"说你洗脸的方法错了?!你肯定觉得不这完全是一派胡言。从小就天天洗脸,这还用教吗?针对这个问题对女性进行了街头调查,结果发现80%以上的人洗脸方法都有错误或疏漏。其实,黑头、痘痘等皮肤问题都与洗脸方法不正确、洗不干净有关。即使用昂贵的化妆品,如果操作方法不对,同样起不到清洁美容的效果。", topContent: '<p>&nbsp;<span>&nbsp; &nbsp; 人体自然的生物节律就犹如心脏跳动一样重要，体内无一器官没有各自的节律，节律消失就意味着人体的死亡。医生和药物学家认识到，按一定的时间表服用药物，可以收到更好的药用效果。下面将部分药品服用的最佳时间介绍如下。</span></p>', content: `洗脸三不该<br>　　日常生活中人们常做些“无效劳动”,以洗脸为例,就有三件不该做的事,既耗时耗物,又无益于皮肤健美。 <br>　　不该用脸盆<br>　　且不说脸盆是否清洁,单说其中的洗脸水,在手脸互动之后,越来越浑,最后以不洁告终。远不如用手捧流水洗脸:先把手搓洗干净,再用手洗脸,一把比一把干净,用不了几把,就全干净了。<br>　　不该用湿毛巾<br>　　久湿不干的毛巾有利于各种微生物滋生,用湿毛巾洗脸擦脸无异于向脸上涂抹各种细菌。毛巾应该经常保持清洁干燥,用手洗脸之后用干毛巾擦干,又快又卫生。<br>不该用肥皂<br>面部皮肤有大量的皮脂腺和汗腺,每时每刻都在合成一种天然的“高级美容霜”,在皮肤上形成一层看不见的防护膜。它略呈酸性,有强大的杀菌护肤作用。偏碱性的肥皂不但破坏了它的保护作用,而且会刺激皮脂腺多多“产油”。你越是用肥皂“除油”,皮脂腺产油就越多,最后难以收拾。可见,如果皮肤不是太脏,就不该用肥皂清洗。<br>　　洗脸正确常识十七条<br>　　洗脸常识第一条：你会用毛巾吗?<br>　　1、毛巾必须每周彻底清洗一次，打满肥皂，然后用清水冲洗干净。 <br>　　2、有条件的话，最好洗完了再煮一煮。或者在太阳下把毛巾晒干，紫外线有杀菌的作用。<br>　　3、使用时经常换面<br>　　4、擦脸用的毛巾一定要和擦脚、洗澡、擦头发的毛巾按用途分开，更不能和其他人混用毛巾。<br>　　洗脸常识第二条：洗脸前先洗手至关重要<br>　　洗脸前先用洗手液或肥皂，充分轻柔手心手背，再用流动的清水把手冲洗干净。这之后才能开始洗脸，用手打出的泡沫才是清洁干净的，能起到很好的面部去污效果。<br>　　洗脸常识第三条：泡沫型的洗面奶要充分起泡<br>　　把适量的洁面乳倒在掌心，加入少量的水帮助搓泡。打出足够的泡沫，把搓好的泡沫均匀地涂抹在脸上，然后向着顺时针的方向轻轻的打圈和按摩，力度要温柔。<br>洗脸常识第四条：用洗脸海绵轻柔擦拭皮肤<br>　　毛巾绒比毛孔大数十倍，很难深入清除皮肤深处的污渍，久湿不干的毛巾还会滋生细菌令皮肤过敏。建议用柔和洁面海绵洗脸，并经常晾晒消毒。同时洗脸时一定不可以用力摩擦皮肤，这样会刺激皮肤，造成分泌更多的油脂。洗脸海绵的主要作用是打出丰富的泡沫，令泡沫充分与皮肤接触，清理出毛孔深层的污垢。 <br>　　洗脸常识第五条：洁面产品不要使用过量<br>　　正确洁面品要适量。过少，洗不干净;过多，造成肌肤敏感、加重肌肤负担、阻塞毛孔。无论你是选择哪一款的洁面产品，洗面奶，洁面乳等，都要记着不能使用过量。假如是清洁不彻底，很容易留下残留，从而伤害肌肤。<br>　　洗脸常识第六条：你会选择洁面产品吗?<br>　　选择柔和的洁面奶，避免使用劣质的、含碱性高的洁面产品，选择产品时以温和适中的保养品为宜。市面上某些含有果酸的洁面产品酸性太强，也不是适合所有人的肤质，购买时要注意选择。`},
        {id:43,title: '六美白药膳祛斑粥', time: '2018-12-15', image: require('../../assets/info/cosmetology3.jpg'), intro:"中药除了具有治病防病的功效，还具有美白养颜祛斑的功效。现在市面上很多美容护肤的产品都是源自于植物，效果也得到了大众的认可。其实美白祛斑也不一定要花费太多的金钱，美容药膳也是您不可或缺的选择。让我们来看看古人都是如何美白祛斑的?", topContent: '<p><span>&nbsp; &nbsp; 临床表现皮疹多发生于颜面，尤其是颊、额、鼻旁等，皮疹炎症明显，或有口臭口干，脓疱，尿黄便结，苔黄，舌质红，脉数。此时，可以服用清胃黄连丸，能起到很好的疗效。那么，清胃黄连丸不良反应是什么?可以长期用吗?</span></p>', content: `一、山药枸杞粥——除色斑<br>　　原料：粳米100克，鲜山药50克，枸杞15克，白糖15克，蜂蜜10克，冷水1500毫升。<br>　　制作程序：<br>　　1.粳米洗净，用冷水浸泡一小时后捞出来，沥干水分。<br>　　2.新鲜山药去皮，刮洗干净，切成小丁状待用。枸杞子用温水泡开待用。<br>　　3.锅内加入1500毫升冷水，放入粳米、山药、枸杞，用大火烧开，转小火熬制软烂即可，食用时加入白糖和蜂蜜。<br>　　药膳功效：补血养颜，消除色斑。<br>　　二、什锦水果羹——解暑祛斑<br>　　原料：梨一个，苹果一个，香蕉一个，菠萝一块，猕猴桃一个，草莓四个，水淀粉20克，白糖15克，蜂蜜10克，冷水适量。<br>　　制作程序：<br>　　1.将梨、苹果、香蕉、菠萝、猕猴桃、草莓洗净，切丁待用。<br>　　2.锅内加入水适量，放入所有的水果丁，用大火烧开后转小火熬制。待水果煮烂后加入白糖，最后淋入水淀粉，边淋边用勺推，烧开后装入汤盆内放入蜂蜜即可食用。<br>　　药膳功效：解暑消烦，美白去斑。<br>　　三、枇杷红枣粥——润肺养颜<br>　　原料：粳米100克，枇杷六枚，白糖10克，冷水1000毫升。<br>　　制作程序：<br>　　1.将枇杷冲洗干净，撕去外皮，剔去枇杷核。<br>　　2.粳米洗净，用冷水浸泡一小时后捞出来，沥干水分。<br>　　3.锅内加入1000毫升冷水，加入粳米、红枣，用大火烧开后加入枇杷，改成小火熬煮成粥，最后加入白糖调味即可食用。<br>　　药膳功效：润肺养颜，祛斑健胃。<br>　　四、薏仁莲子粥——美白除雀斑<br>　　原料：薏仁150克，莲子50克，红枣五颗，冰糖15克，冷水1000毫升。<br>　　制作程序：<br>　　1.薏仁淘洗干净，用冷水浸泡三个小时，捞出沥干水分。莲子去莲心，用冷水洗净;红枣洗净去核。<br>　　2.锅内加入1000毫升冷水，放入薏仁，用旺火烧沸，然后加入莲子、红枣，一起焖煮至熟透，最后加入冰糖，熬至成粥状，即可食用。<br>药膳功效：美白保湿，可消除雀斑、老年斑、蝴蝶斑等。<br>　　五、西芹牛肉羹——美白去斑<br>　　原料：西芹50克，牛肉末150克，鸡蛋清一个，料酒5克，盐5克，鸡精8克，水淀粉30克，高汤800克，猪油10克，葱姜丝各适量。<br>　　制作程序：<br>　　1.将西芹洗净，切成细丁状待用。<br>　　2.锅内上火，加入猪油，锅热后加入葱姜丝煸炒香，再放入牛肉末炒散，加入料酒后再放入高汤、西芹粒、料酒、精盐、鸡精烧沸，下水淀粉后搅匀，最后淋入打散的鸡蛋清，边淋边用勺推，烧开后装入汤盆内即可。<br>　　药膳功效：美白去斑。<br>　　六、橘子山楂粥——去斑养颜<br>　　原料：粳米100克，橘子两个，山楂30克，白糖10克，冷水1500毫升。<br>　　制作程序：<br>　　1.橘子剥皮，撕去筋络，逐瓣分开，用竹签去掉橘子核，切成小三角块。山楂洗净后一切为二，去掉种子。<br>　　2.粳米洗净，用冷水浸泡一小时后捞出来，沥干水分。<br>　　3.锅内加入1000毫升冷水，加入粳米、橘子块，山楂块，用旺火烧开，转小火熬成粥，最后加入白糖即可食用。<br>　　药膳功效：美容护肤，去斑养颜。<br>　　不过药膳还是有别于普通的食物，因此大家选择服用是，应当十分注意食疗中药的性味、以及药膳的宜忌、还包括选料与加工、烹调技术等。`}
      ]
    }
  },
  filters: {
    fixed (val) {
      return val.toFixed(2)
    }
  },
  mounted () {
    // this.getProducts()
  },
  methods: {
    handleSizeChange (val) {
      this.params.pagesize = val
      this.getProducts()
    },
    handleCurrentChange (val) {
      this.params.pagenum = val
      this.getProducts()
    },
    viewProduct (i) {
      sessionStorage.setItem('curInfo', JSON.stringify(i))
      this.$router.push('/info/detail')
    },
    searchHandle (val) {
      this.params.keyWord = val
      this.getProducts()
    },
    getProducts () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(['app/shop/goods/list', this.params], `${PLATFORM_PREFIX}.shoppingMallService`, 'doPost').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          let body = JSON.parse(res.data.body)
          if (body.data.total > 0) {
            console.log(body.data.goods)
            this.total = body.data.total
            this.products = body.data.goods
          } else {
            this.products = []
          }
        }
      })
    },
    orderProduct () {
      if (this.params.orderId === 10) {
        this.params.orderId = 11
      } else {
        this.params.orderId = 10
      }
      this.getProducts()
    },
    priceProduct () {
      if (this.params.orderId === 20) {
        this.params.orderId = 21
      } else {
        this.params.orderId = 20
      }
      this.getProducts()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.common-title {
  padding: 20px;
  border-bottom: 2px solid #FCF6F2;
  overflow: hidden;
  .main {
    float: left;
    color: @color-primary;
    font-size: 1.2em;
  }
  .sub {
    float: left;
    margin-left: 80px;
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    .iconfont {font-size: 12px;}
    dt , dd{float: left;margin-left: 20px;cursor: pointer;}
  }
}
.product-list{
  overflow: hidden;
  padding: 20px;
  >.product-list-item {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid @color-border;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    overflow: hidden;
    &:hover{
      border-color: #EAD0C3;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .product-img{
      width: 200px;
      height: 160px;
      float: left;
      margin-right: 20px;
      position: relative;
    }
    .product-img > img {
      width: 80%;
      // height:100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .product-title {
      width: 760px;
      float: left;
      .topTitle{
        width: 100%;
        line-height: 2;
        font-size: 16px;
      }
      .content{
        width: 100%;
        line-height: 1.5;
        font-size: 14px;
        color:#666;
      }
      .pTime{
        margin-top: 30px;
        color:#666;
        font-size: 12px;
      }
    }
  }
}
</style>
